<template>
	<s-layout class="widthdraw-log-wrap" title="提现申请">
		<!-- 记录卡片 -->
		<view class="wallet-log-box ss-p-b-30">
			<!-- state.pagination.data -->
			<view class="log-list" v-for="(item,index) in state.pagination.data" :key="index">
				<view class="head ss-flex ss-col-center ss-row-between">
					<view class="title">{{
            item?.withdraw_type === 'bank'
              ? '提现至银行卡'
              : item?.withdraw_type === 'alipay'
              ? '提现至支付宝'
              : '提现至微信'
          }}</view>
					<view class="num" :class="
              item?.status === -1
                ? 'danger-color'
                : item?.status === 2
                ? 'success-color'
                : 'warning-color'
            ">{{ item?.amount }}元</view>
				</view>
				<view class="status-box item ss-flex ss-col-center ss-row-between">
					<view class="item-title">申请状态</view>
					<view class="status-text" :class="
              item?.status === -1
                ? 'danger-color'
                : item?.status === 2
                ? 'success-color'
                : 'warning-color'

            ">{{ item?.status === 1?'已打款-待领取':item?.status_text }}</view>
				</view>
				<view class="time-box item ss-flex ss-col-center ss-row-between">
					<text class="item-title">账户信息</text>
					<view class="time ss-ellipsis-1" v-if="item?.withdraw_type === 'bank'">
						{{ item?.withdraw_info_hidden.开户行 }}[{{ item?.withdraw_info_hidden.银行卡号 }}]</view>
					<view class="time ss-ellipsis-1" v-if="item?.withdraw_type === 'alipay'">
						支付宝[{{ item?.withdraw_info_hidden.支付宝账户 }}]
					</view>

					<view class="time ss-ellipsis-1" v-if="item?.withdraw_type === 'wechat'">微信零钱</view>
				</view>
				<view class="time-box item ss-flex ss-col-center ss-row-between">
					<text class="item-title">提现单号</text>
					<view class="time"> {{ item?.withdraw_sn }} </view>
				</view>
				<view class="time-box item ss-flex ss-col-center ss-row-between">
					<text class="item-title">手续费</text>
					<view class="time">{{ item?.charge_fee }}元</view>
				</view>
				<view class="time-box item ss-flex ss-col-center ss-row-between">
					<text class="item-title">申请时间</text>
					<view class="time"> {{ item?.create_time }}</view>
				</view>
				<view class="time-box item ss-flex ss-col-center ss-row-between">
					<text class="item-title">异常原因</text>
					<view class="time"> {{ item?.reason||'-' }}</view>
				</view>
				<view class="time-box item ss-flex ss-col-center ss-row-between">
					<text class="item-title">备注</text>
					<view class="time"> {{ item?.notes||'-' }}</view>
				</view>
				<view  class="time-box item ss-flex justify-between  align-start">
					<text class="item-title">附件</text>
					<view class="time" v-if="item?.images==null">-</view>
					<view class="grid-pic" v-if="item?.images?.length>0">
						<template  v-for="(url,ind) in item.images" :key="ind">
							<image @tap="onImgPreview(item.images,ind)" class="infoCard" :src="sheep.$url.cdn(url)" mode="widthFix" />
						</template>
					</view>
				</view>

				<view v-if="item?.status==1&&item?.withdraw_type=='wechat'" class="time-box item ss-flex justify-end ">
					<text class="item-title ss-m-r-20">请24小时内前往收款</text>
					<button class="btn ss-reset-button " @tap="wxConfirm(item,index)">
						前往收款
					</button>
				</view>
			</view>
		</view>
		<s-empty v-if="state.pagination.total === 0" icon="/static/comment-empty.png" text="暂无提现记录"></s-empty>
		<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
        contentdown: '上拉加载更多',
      }" @tap="loadmore" />
	</s-layout>
</template>

<script setup>

	import {
		reactive,onBeforeUnmount
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad,
		onReachBottom,
		onShow,
		onHide
	} from '@dcloudio/uni-app';
	import _ from 'lodash';
	import $wxApi from './components/jsapi.js';

	const paginObj = {
		data: [],
		current_page: 1,
		total: 1,
		last_page: 1,
	}
	const state = reactive({
		currentTab: 0,
		pagination: {
			data: [],
			current_page: 1,
			total: 1,
			last_page: 1,
		},
		loadStatus: '',
		timer:null,
		tag:null
	});
	async function getList(page = 1, list_rows = 10) {
		const res = await sheep.$api.pay.withdraw.list({
			list_rows,
			page
		});
		if (res.error === 0) {
			console.log('res.data.data',res.data.data)
			let logList = _.concat(state.pagination.data, res.data.data);
			state.pagination = {
				...res.data,
				data: logList,
			};
			if (state.pagination.current_page < state.pagination.last_page) {
				state.loadStatus = 'more';
			} else {
				state.loadStatus = 'noMore';
			}
		}
	}
	
	// async function updateItem(tag){
	// 	const res = await sheep.$api.pay.withdraw.updateList({
	// 		list_rows:10,
	// 		page:1
	// 	});
	// 	if (res.error === 0) {
	// 		state.pagination.data[tag]=res.data.data[tag]
	// 	}
	// }

	function wxConfirm(item,index) {
		$wxApi.wxConfirm(item.package_info, item.amount,index)
	}

	// 预览图片
	function onImgPreview(urls,current) {
	  uni.previewImage({
	    urls,
	    current,
	    longPressActions: {
	      itemList: ['发送给朋友', '保存图片', '收藏'],
	      success: function (data) {
	        console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
	      },
	      fail: function (err) {
	        console.log(err.errMsg);
	      },
	    },
	  });
	}
	// 加载更多
	function loadmore() {
		if (state.loadStatus !== 'noMore') {
			getList(state.pagination.current_page + 1);
		}
	}
	
	onHide(()=>{
		// console.log('onHide关闭轮询')
		// 	clearInterval(state.timer)
		// 	state.timer=null
		// 	state.tag=null
	})
	onBeforeUnmount(()=>{
		// console.log('触发onBeforeUnmount关闭轮询')
		
		// 	clearInterval(state.timer)
		// 	state.timer=null
		// 	state.tag=null
	})
	onShow(async (options) => {
		console.log('触发onShow')
		Object.assign(state.pagination, paginObj)
		await getList();
		// await uni.$on('updateItem', (e) => {
		// 	state.tag=e.tag
		// })
		// if(state.tag){
		// 	console.log('updateItem开启轮询',state.tag)
		// 	state.timer=setInterval(()=>{
		// 		updateItem(state.tag)
		// 	},1000)
		// }
		
		
		
	})
	onReachBottom(() => {
		loadmore();
	});
</script>

<style lang="scss" scoped>
	// 记录卡片
	.log-list {
		min-height: 213rpx;
		background: $white;
		margin-bottom: 10rpx;
		padding-bottom: 10rpx;

		.head {
			padding: 0 35rpx;
			height: 80rpx;
			border-bottom: 1rpx solid $gray-e;
			margin-bottom: 20rpx;

			.title {
				font-size: 28rpx;
				font-weight: 500;
				color: $dark-3;
			}

			.num {
				font-size: 28rpx;
				font-weight: 500;
			}
		}

		.item {
			padding: 0 30rpx 10rpx;

			.item-icon {
				color: $gray-d;
				font-size: 36rpx;
				margin-right: 8rpx;
			}


			.item-title {
				// width: 180rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #666666;
			}

			.status-text {
				font-size: 24rpx;
				font-weight: 500;
			}


			.time {
				font-size: 24rpx;
				font-weight: 400;
				color: #c0c0c0;
			}
			.grid-pic{
				width:550rpx;
				display:flex;
				flex-wrap:wrap;
				direction: rtl;
				.infoCard{
					width:100rpx;
					height:100rpx;
					margin-left:10rpx;
					margin-bottom:10rpx;
				}
			}
			
		}
	}

	.warning-color {
		color: #faad14;
	}

	.danger-color {
		color: #ff4d4f;
	}

	.success-color {
		color: #67c23a;
	}

	.btn {
		background: linear-gradient(281deg, #05D5BF 0%, #06C2AE 50%, #A2CEFD 100%);
		width: 172rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 30rpx;
		color: #F6F6F6;
		font-size: 28rpx;
	}
</style>
